<template>
  <div class="sayingbg">
    <div class="saying-intro">
      <div class="title-head font-xbs">解困者<span style="color: #fa7c0a;">说</span></div>
      <div class="intro" v-loading="user.pages.saying.intro.length == 0">
        <div class="upper-quotation">“</div>
        {{ user.pages.saying.intro }}
        <div class="lower-quotation">”</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { userinfo } from '@/stores/counter'
import { onMounted, ref } from 'vue';
import getPodcastIntros from '@/api/getPodcastIntros'

const user = userinfo()
const { getIntros } = getPodcastIntros()

onMounted(() => {
  if (user.pages.saying.intro.length == 0) {
    getIntros()
  }
})
</script>

<style scoped>
.sayingbg {
  height: fit-content;
  min-height: 540px;
  width: 1000px;
  margin-top: 80px;
  background-image: url(/assets/imgs/storiesbg.jpg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
}

.saying-intro {
  background-color: white;
  box-shadow:
  1.2px 1.3px 2.2px rgba(0, 0, 0, 0.02),
  2.8px 3.2px 5.3px rgba(0, 0, 0, 0.028),
  5.3px 6px 10px rgba(0, 0, 0, 0.035),
  9.4px 10.7px 17.9px rgba(0, 0, 0, 0.042),
  17.5px 20.1px 33.4px rgba(0, 0, 0, 0.05),
  42px 48px 80px rgba(0, 0, 0, 0.07)
  ;
  width: 650px;
  min-height: 198px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 120px 40px;
  position: relative;
  bottom: 20px;
}

.title-head {
  font-size: 40px;
  font-weight: 550;
}

.intro {
  margin-top: 30px;
  color: #6a6363;
  line-height: 33px;
  text-align: left;
  white-space: pre-wrap;
}

.upper-quotation,.lower-quotation {
  color: #fa7c0a;
  position: absolute;
  font-size: 100px;
}

.upper-quotation {
  left: 0;
  top: 90px;
}

.lower-quotation {
  right: 0;
  bottom: 20px;
}
</style>